<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #box {
        width: 1000px;
        height: 500px;
        background: #ccc;
        font-size: 40px;
        text-align: center;
        line-height: 500px;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>

    <script>
      const box = document.getElementById('box')
      box.onmousemove = throttle(function(e) {
        box.innerHTML = `${e.clientX}, ${e.clientY}`
      }, 1000)

      // 防抖
      function debounce(func, delay) {
        let timeout
        return function() {
          clearTimeout(timeout)
          timeout = setTimeout(() => {
            func.apply(this, arguments)
          }, delay)
        }
      }
      // 节流
      function throttle(func, delay) {
        let run = true
        return function() {
          if (!run) {
            return
          }
          run = false
          setTimeout(() => {
            func.apply(this, arguments)
            run = true
          }, delay)
        }
      }
    </script>
  </body>
</html>
